<script setup>
import { ref } from 'vue'
import { articleChannelService, artDelChannelService } from '@/api/article'
import { Edit, Delete } from '@element-plus/icons-vue'
import ChannelEdit from '@/views/article/components/ChannelEdit.vue'
//获取文章分类信息
const channelList = ref([])
const loading = ref(true)

const getArticleChannel = async () => {
  const res = await articleChannelService()
  channelList.value = res.data.data
  console.log(res.data.data)
  console.log(channelList.value,typeof channelList.value)
  loading.value = false
}
getArticleChannel()

const dialog = ref()
const onAddChannel = () => {
  dialog.value.open()
}
const onEditChannel = (row) => {
  dialog.value.open(row)
}
const onDeleteChannel = (row) => {
  ElMessageBox.confirm('确认删除分类吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await artDelChannelService(row.id)
    if(res.status === 200){
      ElMessage.success('删除成功')
      getArticleChannel()
    }else{
      ElMessage.error(res.data.message)
    }
  })
}
</script>
<template>
  <PageContainer title="文章分类">
    <template #extra>
      <el-button @click="onAddChannel()">添加分类</el-button>
    </template>
      <el-table :data="channelList" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{row}">
            <el-button :icon="Edit" type="primary" circle plain @click="onEditChannel(row)"></el-button>
            <el-button :icon="Delete" type="danger" circle plain @click="onDeleteChannel(row)"></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" height="100%" />
        </template>
      </el-table>
      <ChannelEdit ref="dialog" @getArticleChannel="getArticleChannel" />
  </PageContainer>
</template>
